<template>
    <ContentField>
        <table class="table table-striped table-hover" style="text-align: center;"><!--style表示剧中-->
            <thead>
                <tr>
                    <th>A</th>
                    <th>B</th>
                    <th>对战结果</th>
                    <th>对战时间</th>
                    <th>操作</th><!--回放按钮的入口-->
                </tr>
            </thead>
            <tbody>
                <tr v-for="record in records" :key="record.record.id"><!--遍历下方的对局记录数组
                    第一个record是前端定义的变量名，指代从后端拿来的一局记录的所有信息，后一个record指代一句记录中封装的record表
                    :key值无实际引用，标示每一个<td>标签的唯一性
                -->
                    <td><!--展示A玩家的头像和用户名-->
                        <img :src="record.a_photo" alt="" class="record-user-photo">
                        &nbsp;
                        <span class="record-user-username">{{ record.a_username }}</span>
                    </td>
                    <td><!--展示B玩家的头像和用户名-->
                        <img :src="record.b_photo" alt="" class="record-user-photo">
                        &nbsp;
                        <span class="record-user-username">{{ record.b_username }}</span>
                    </td>
                    <td>{{ record.result }}</td><!--展示对局结果和对局开始时间-->
                    <td>{{ record.record.createtime }}</td>
                    <td><!--绑定按钮点击事件，跳转录像回放的实现函数-->
                        <button @click="open_record_content(record.record.id)" type="button" class="btn btn-secondary">查看录像</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <nav aria-label="..."><!--下面都是抄的分页代码框架-->
        <ul class="pagination" style="float: right;"><!--放到右边-->
            <li class="page-item" @click="click_page(-2)"><!--前一页，参数传-2-->
                <a class="page-link" href="#">前一页</a><!--加上href为了让鼠标变成小手形状-->
            </li>
            <li :class="'page-item ' + page.is_active" v-for="page in pages" :key="page.number" @click="click_page(page.number)"><!--绑定按钮事件，传入页面号-->
                <!--循环展示，:class是因为后面有表达式，注意page-item后面有一个空格，因为这是两个类属性-->
                <a class="page-link" href="#">{{ page.number }}</a>
            </li>
            <li class="page-item" @click="click_page(-1)"><!--后一页，参数传-1-->
                <a class="page-link" href="#">后一页</a>
            </li>
        </ul>
        </nav>
    </ContentField>
</template>

<script>
import ContentField from '../../components/ContentField.vue'//卡片框架
import { useStore } from 'vuex';//取出全局变量
import { ref } from 'vue';//用来定义变量
import $ from 'jquery';//用于像后端发送请求
import router from '../../router/index'//引入路由，可以让浏览器跳转到任意一个界面

export default {
    components: {
        ContentField//方便在上面使用
    },
    setup() {
        const store = useStore();//取出全局变量
        let records = ref([]);//用于接受后端传来的对局记录
        let current_page = 1;//记录当前页面
        let total_records = 0;//记录总记录数
        let pages = ref([]);//存分页按钮中的五个页面信息（前2后2）

        const click_page = page => {//绑定选择页码按钮的点击事件函数，传入页码
            if (page === -2) page = current_page - 1;//前一页
            else if (page === -1) page = current_page + 1;//后一页
            let max_pages = parseInt(Math.ceil(total_records / 10));//获取最大页数

            if (page >= 1 && page <= max_pages) {//当前页数合法，就拉取当前页
                pull_page(page);
            }
        }

        const udpate_pages = () => {//更新底部分页的小按钮显示内容
            let max_pages = parseInt(Math.ceil(total_records / 10));//总记录数/每页最多展示记录数（向上取整，得出最大页数）
            let new_pages = [];
            for (let i = current_page - 2; i <= current_page + 2; i ++ ) {//显示当前页，以及当前页的前后两页按钮
                if (i >= 1 && i <= max_pages) {//表示这一页是有数据的
                    new_pages.push({//存入数组，存入这一页的页号，以及现在浏览器是否正在展示这一页，若是，这个按钮要高亮
                        number: i,
                        is_active: i === current_page ? "active" : "",
                    });
                }
            }
            pages.value = new_pages;
        }

        const pull_page = page => {//从后端拉取页面的函数，传入页号参数
            current_page = page;//用参数改当前页变量
            $.ajax({
                url: "http://127.0.0.1:3029/record/getlist/",//请求路径
                data: {
                    page,//出入页面参数
                },
                type: "get",
                headers: {
                    Authorization: "Bearer " + store.state.user.token,//用户登录状态认证
                },
                success(resp) {//成功返回resp
                    records.value = resp.records;//后端存所有满足条件记录的列表，赋值给records数组
                    total_records = resp.records_count;//获取总记录数
                    udpate_pages();//成功获取记录后，需要调用更新页面按钮的函数
                },
                error(resp) {//成功返回resp
                    console.log(resp);
                }
            })
        }

        pull_page(current_page);//自动运行拉取页面的函数，

        const stringTo2D = map => {//把地图字符串转换成数组
            let g = [];
            for (let i = 0, k = 0; i < 13; i ++ ) {
                let line = [];
                for (let j = 0; j < 14; j ++, k ++ ) {
                    if (map[k] === '0') line.push(0);
                    else line.push(1);
                }
                g.push(line);
            }
            return g;
        }

        const open_record_content = recordId => {//录像回放按钮绑定的函数（传入录像id）
            for (const record of records.value) {//从所有录像中，找出当前选择的录像。js代码里，变量取值都要加.value
                if (record.record.id === recordId) {
                    store.commit("updateIsRecord", true);//第一步就是在全局变量中标识现在已经是录像界面了，不再是游戏界面
                    store.commit("updateGame", {//这里复用了游戏界面的操作（所以上面要做区分）
                        map: stringTo2D(record.record.map),//传入二维数组地图
                        a_id: record.record.aid,//这些都是依据游戏界面复刻出来的操作
                        a_sx: record.record.asx,
                        a_sy: record.record.asy,
                        b_id: record.record.bid,
                        b_sx: record.record.bsx,
                        b_sy: record.record.bsy,
                    });
                    store.commit("updateSteps", {//存每一步
                        a_steps: record.record.asteps,
                        b_steps: record.record.bsteps,
                    });
                    store.commit("updateRecordLoser", record.record.loser);
                    router.push({//通过路由，无条件跳转到录像播放页面，参数是录像id
                        name: "record_content",
                        params: {
                            recordId
                        }
                    })
                    break;
                }
            }
        }

        return {
            records,
            open_record_content,
            pages,//返回按钮信息，方便上面调用
            click_page
        }
    }
}
</script>

<style scoped>
img.record-user-photo {
    width: 4vh;/*头像变小一点*/
    border-radius: 50%;/*头像变成圆形*/
}
</style>
